<template>
  <div class="setting-approve">
    <el-radio-group v-model="approveSetting.level" @change="switchLevel">
      <el-radio :label="0">{{$t('common.base.autoApproveIt')}}</el-radio>
      <el-radio :label="1" class="ml-12">{{$t('common.base.approveByUser')}}</el-radio>
      <slot name="reassign"></slot>
    </el-radio-group>
    <div v-if="approveSetting.level === 1" class="setting-approve-people">
      {{$t('common.placeholder.selectSomething', {0:$t('common.base.approveUser')})}}
      <el-tooltip :disabled="!approveSetting.leader || options.some(opt => approveSetting.leader === opt.value)" :content="$t('contract.setting.approveSetting.des1')">
        <el-select
          class="w-187 mr-5 ml-5"
          :value="approveSetting.leader"
          :placeholder="$t('common.placeholder.select')"
          @change="(val) => updateApproveSetting('leader', val, 1)"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-tooltip>
      <template v-if="approveSetting.leader === 'users'" class="mt-12">
        <el-input
          v-if="!isOpenData"
          class="w-187 mr-5"
          :placeholder="$t('common.placeholder.selectSomething', {0:$t('common.base.approveUser')})"
          readonly
          :value="getApproverNames(approveSetting.approvers)"
          @click.native="selectApproveUser()"
        />
        <div v-else class="setting-open-data-input block-inline w-187 mr-5" @click="selectApproveUser()">
          <template v-for="(item, index) in getApproverIds(approveSetting.approvers)">
            <open-data :key="item" type="userName" :openid="item"></open-data>
            <ui-separator :index="index" :list="getApproverIds(approveSetting.approvers)" :key="`${item}${uuid()}`" />
          </template>
          <!-- <open-data v-for="staffId in getApproverIds(approveSetting.approvers)" :key="staffId" type="userName" :openid="staffId"></open-data> -->
        </div>
        <!-- <el-button class="ml-12" type="primary" size="small" @click="selectApproveUser()">添加审批人</el-button> -->
      </template>
    </div>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import _ from 'lodash';

import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser'

export default {
  name: 'approve-setting',
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    approveSetting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isOpenData
    }
  },
  methods: {
    /** 选择审批等级 */
    switchLevel(val) {
      this.approveSetting.approvers = []
      this.approveSetting.leader = ''
      this.approveSetting.level = val
    },
    getApproverNames(approvers) {
      return approvers.map((item) => item.displayName).join(',');
    },
    getApproverIds(approvers) {
      return approvers.map((item) => item.staffId);
    },
    /**
     * 更新审批设置
     *
     * @param {string} key 更新的key值
     * @param {string} value 更新值
     * @param {number} level 更新审批的层级
     */
    updateApproveSetting(key, value, level) {
      let approveSetting = _.cloneDeep(this.approveSetting);

      // 一级设置
      if (level <= 1) {
        approveSetting[key] = value;
        if (approveSetting.leader !== 'users') {
          approveSetting.approvers = [];
        }
      }

      this.$emit('change', approveSetting);
    },
    /**
     * 选择指定的审批人员
     * @param {number} level 审批的层级
     */
    selectApproveUser() {
      let selected = this.approveSetting.approvers
      let options = {
        title: this.$t('contract.setting.flow.title3'), // [选填] 默认值为 '请选择人员'
        max: 14, // [选填]最大人数：当值小于等于0或者不填时，不对选择人数做限制，max值为1时单选，大于1时多选
        selectedUsers: selected, // [选填] 已选人员 每个人员必须包括userId,displayName,staffId,head这四个属性，只有带max大于1时生效
        mode: BaseSelectUserModeEnum.Filter
      };

      this.$fast.select.multi.user(options)
        .then((res) => {
          if (res.status != 0) return;

          this.updateApproveSetting('approvers', res.data.users, 1);
        })
        .catch((err) => {
          console.warn(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.setting-approve {
  &-people {
    line-height: 40px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #999999;
  }
}
.mr-5{
  margin-right: 5px;
}
.ml-5{
  margin-left: 5px;
}
.ml-12 {
  margin-left: 12px;
}

.mt-12 {
  margin-top: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.w-187 {
  width: 187px;
}
.block-inline {
  display: inline-block;
}
</style>
